<template>

  <div style="margin:40px;">
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="position: relative;">
        <span style="margin:0;font-size:18px;font-weight:bold;">{{ this.$route.meta.title }}</span>
        <el-button style=" padding:3px 0;position:absolute;right:0;top:10px; " type="text" @click="cancelForm">
          <span v-if="last === undefined">返回列表</span>
          <span v-else>返回日程表</span>
        </el-button>
      </div>

      <div style="max-width:100%;margin:auto;">
        <table class="table table-bordered th-bg">
          <thead>
          <tr>
            <th colspan="4">检查记录详情
            </th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <th width="20%">被检查企业社会信用代码</th>
            <td width="30%">
              {{ form.creditCode }}
            </td>
            <th width="20%">被检查企业名称</th>
            <td width="30%">
              {{ form.enterpriseName }}
            </td>
          </tr>
          <tr>
            <th width="20%">实际检查日期</th>
            <td width="30%">
              {{  form.inspectDate | formatDate }}
            </td>
            <th width="20%">检查类型</th>
            <td width="30%">
              {{  form.inspectType }}
            </td>
          </tr>
          <tr v-if="form.inspectType=='单独检查'">
            <th width="20%">检查单位</th>
            <td width="30%">
              {{  form.inspectDept1 }}
            </td>  
            <th width="20%">检查事项</th>
            <td width="30%">
              {{ form.inspectItems1 }}
            </td>
          </tr>
          <tr v-if="form.inspectType=='单独检查'">
            <th width="20%">检查意见</th>
            <td colspan="3">
              {{ form.inspectOpinion1 }}
            </td>
          </tr>
          <tr v-if="form.inspectType!='单独检查'">
            <th width="20%">检查单位1</th>
            <td width="30%">
              {{  form.inspectDept1 }}
            </td>  
            <th width="20%">检查事项1</th>
            <td width="30%">
              {{ form.inspectItems1 }}
            </td>
          </tr>
          <tr v-if="form.inspectType!='单独检查'">
            <th width="20%">检查意见1</th>
            <td colspan="3">
              {{ form.inspectOpinion1 }}
            </td>
          </tr>
          <tr v-if="form.inspectType!='单独检查'">
            <th width="20%">检查单位2</th>
            <td width="30%">
              {{  form.inspectDept2 }}
            </td>  
            <th width="20%">检查事项2</th>
            <td width="30%">
              {{ form.inspectItems2 }}
            </td>
          </tr>
          <tr v-if="form.inspectType!='单独检查'">
            <th width="20%">检查意见2</th>
            <td colspan="3">
              {{ form.inspectOpinion2 }}
            </td>
          </tr>
          

          </tbody>
        </table>
      </div>
    </el-card>

  </div>
</template>

<script>
import crudRecord from '@/api/business/synthesis/record'

export default {
  components: {
  },
  props: {},
  data() {
    return {
      id: '',
      form: {},
      businessLicenseFileInfo: [],
      photoFileInfo: [],
      environmentFileInfo: [],
      houseFileInfo: [],
      contractFileInfo: [],
      environmentReviewFileInfo: [],
      environmentAcceptFileInfo: [],
      pollutionPermitFileInfo:[],
      taxFileInfo: [],
      activeName: 'detail',
      last: ''
    }
  },
  filters: {
    formatDate(inspectDate) {
      const date = new Date(inspectDate);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  },
  created() {
    this.id = this.$route.params && this.$route.params.id;
    this.last = this.$route.query && this.$route.query.last;
    this.fetchData(this.id)
  },
  computed: {},
  methods: {
    fetchData(id) {
      const fetchMethod = crudRecord.get
      fetchMethod(id).then(response => {
        this.form = response.data;
        if (response.data && response.data.businessLicenseFileList) {
          for (let i = 0; i < response.data.businessLicenseFileList.length; i++) {
            const item = response.data.businessLicenseFileList[i]
            const file = {
              fileId: item.fileId,
              name: item.fileName,
              url: `business/file/download?fileId=${item.fileId}`
            }
            this.businessLicenseFileInfo.push(file)
          }
        }
        if (response.data && response.data.photoFileList) {
          for (let i = 0; i < response.data.photoFileList.length; i++) {
            const item = response.data.photoFileList[i]
            const file = {
              fileId: item.fileId,
              name: item.fileName,
              url: `business/file/download?fileId=${item.fileId}`
            }
            this.photoFileInfo.push(file)
          }
        }
        if (response.data && response.data.environmentFileList) {
          for (let i = 0; i < response.data.environmentFileList.length; i++) {
            const item = response.data.environmentFileList[i]
            const file = {
              fileId: item.fileId,
              name: item.fileName,
              url: `business/file/download?fileId=${item.fileId}`
            }
            this.environmentFileInfo.push(file)
          }
        }
        if (response.data && response.data.environmentReviewFileList) {
          for (let i = 0; i < response.data.environmentReviewFileList.length; i++) {
            const item = response.data.environmentReviewFileList[i]
            const file = {
              fileId: item.fileId,
              name: item.fileName,
              url: `business/file/download?fileId=${item.fileId}`
            }
            this.environmentReviewFileInfo.push(file)
          }
        }
        if (response.data && response.data.environmentAcceptFileList) {
          for (let i = 0; i < response.data.environmentAcceptFileList.length; i++) {
            const item = response.data.environmentAcceptFileList[i]
            const file = {
              fileId: item.fileId,
              name: item.fileName,
              url: `business/file/download?fileId=${item.fileId}`
            }
            this.environmentAcceptFileInfo.push(file)
          }
        }
        if (response.data && response.data.contractFileList) {
          for (let i = 0; i < response.data.contractFileList.length; i++) {
            const item = response.data.contractFileList[i]
            const file = {
              fileId: item.fileId,
              name: item.fileName,
              url: `business/file/download?fileId=${item.fileId}`
            }
            this.contractFileInfo.push(file)
          }
        }

        if (response.data && response.data.taxFileList) {
          for (let i = 0; i < response.data.taxFileList.length; i++) {
            const item = response.data.taxFileList[i]
            const file = {
              fileId: item.fileId,
              name: item.fileName,
              url: `business/file/download?fileId=${item.fileId}`
            }
            this.taxFileInfo.push(file)
          }
        }

        if (response.data && response.data.pollutionPermitFileList) {
          for (let i = 0; i < response.data.pollutionPermitFileList.length; i++) {
            const item = response.data.pollutionPermitFileList[i]
            const file = {
              fileId: item.fileId,
              name: item.fileName,
              url: `business/file/download?fileId=${item.fileId}`
            }
            this.pollutionPermitFileInfo.push(file)
          }
        }
      }).catch(err => {
        console.log(err)
      })
    },
    cancelForm() {
      if (this.last) {
        this.$router.push('/business/synthesis/plan')
      } else {
        this.$router.push('/business/synthesis/record')
      }
    },
  },

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}

.amap-wrapper {
  width: 500px;
  height: 500px;
}

::v-deep .map-dialog .el-dialog__body {
  padding: 10px 20px;
}

::v-deep .el-card__header {
  border-bottom: none !important;
}
</style>
